<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '新增学校信息' : '编辑学校信息'" append-to-body width="700px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px" append-to-body>
            <!-- <el-form-item label="账号" prop="schId">
                <el-input v-model="form.schId" style="width: 210px;" placeholder="请输入账号" maxlength="11" @change="toStuId()"  clearable/>
            </el-form-item> -->

            <el-form-item label="学校名称" prop="schName">
                <el-input v-model="form.schName" style="width: 505px;" placeholder="请输入学校名称" maxlength="30" minlength="4" clearable/>
            </el-form-item>
            
            <el-form-item label="学校类型" prop="schLevel">
                <el-select v-model="form.schLevel" clearable  filterable placeholder="请选择" style="width: 200px;">
                    <el-option
                        v-for="item in schcut"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学段" prop="schType">
                <el-select v-model="form.schType" clearable  filterable placeholder="请选择" style="width: 200px;">
                    <el-option
                        v-for="item in phname"
                        :key="item.id"
                        :label="item.phName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" style="width: 200px;" placeholder="请输入邮箱号"  clearable/>
            </el-form-item>
            


            <el-form-item label="状态" prop="status">
                <el-radio v-model="form.status" :label="0">启用</el-radio>
                <el-radio v-model="form.status" :label="1">禁用</el-radio>
            </el-form-item>

            <el-form-item label="联系电话" prop="mobile">
                <el-input v-model="form.mobile" style="width: 200px;" placeholder="请输入联系电话"  clearable/>
            </el-form-item>
                      
            
            <el-form-item label="龙头学校" prop="isCock" >
                <el-radio-group v-model="form.isCock">
                    <el-radio  label="1">否</el-radio>
                    <el-radio  label="0">是</el-radio>                    
                </el-radio-group>
            </el-form-item>
            

            <el-form-item label="学校域名" prop="schUrl" >
                <el-input v-model="form.schUrl" style="width: 505px;" placeholder="请输入学校域名"  clearable/>
            </el-form-item>

            <el-form-item label="详细地址" prop="schAddress" >
                <el-input v-model="form.schAddress" style="width: 505px;" placeholder="请输入学校详细地址"  clearable/>
            </el-form-item>

            <!-- <el-form-item label="所在地区" prop="areaCode">
                <al-cascader v-model="form.areaCode" level="2" style="width: 505px;" id="areaCode"/>
            </el-form-item> -->

            <el-form-item label="管理员" prop="adminid" v-show="isAdd==false">
                <el-input v-model="form.adminid" style="width: 505px;" placeholder="请输入邮箱号"  :disabled="disabled"  clearable/>
            </el-form-item>

            <el-form-item label="学校简介">
                <div style="margin: 20px 0;"></div>
                <el-input v-model="form.remark" style="width: 505px;" rows="3" type="textarea" maxlength="20"  clearable show-word-limit />
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit" >确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { schoolSave } from '@/api/request'
import { valitoStuId } from '@/api/data'
import { validateUserId, validatPass, validateEmpty, debounce } from '@/utils/validate'
export default {
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
        phname:{
            type: Array,
            required: true
        },
        schcut:{
            type: Array,
            required: true
        }
    },
    data() {
        // const validatestuId = (rule, value, callback) => {
        //     if (value.trim().length < 1) {
        //         callback(new Error('用户账号不能为空'))
        //     }
        //     if (!validateUserId(value)) {
        //         callback(new Error('请输入正确的用户账号'))
        //     }
        //     else {
        //         callback()
        //     }
        // };
        return {
            disabled:true,
            loading: false, dialog: false, permissions: [],
            form: {
                id:'',
                schId: '',
                schName:'',
                status: 0,
                mobile:'',
                email:'',
                schAddress:'',
                isCock: '1',
                schType:'',   //学段
                schLevel:'',  //学校类型
                schUrl:'',  
                schArea:'',
                remark:'',
                adminid:''
            },
            rules: {
                // schId: [
                //     { required: true, trigger: 'blur',validator: validatestuId,},
                //     {
                //         min: 4,
                //         max: 11,
                //         message: '账号长度在 4 到 11个字符,字母大小写和数字',
                //         trigger: 'blur',
                //     }
                // ],
                schName:[
                    { required: true, trigger: 'blur',min: 2,max: 30,
                        message: '学校名长度在 2 到 30个字符'},
                    {validator:validateEmpty,trigger: 'blur',}
                ],
                schType:[
                    { required: true, trigger: 'blur', message: '请选择学段',},
                ],
                schLevel:[
                    { required: true, trigger: 'blur', message: '请选择学校类型',},
                ],

            },
        }
    },
    methods: {
        cancel(){
            this.dialog  = false
        },
        doSubmit:debounce(function(){
            this.$refs['form'].validate((valid) => {
                if (valid){
                    this.form.schType = (this.form.schType).toString()
                    schoolSave(this.form).then(res => {
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 2500
                        })
                        this.dialog = false
                        this.$parent.init()
                    })
                }else {
                    return false
                }

            })

        },500),
        toStuId(){
            // if (this.form.stuId) {
            //     valitoStuId(this.form.stuId).then(res => {
            //             if (res.data === false) {
            //                 this.disabled = true
            //                 this.$message({
            //                     message: '用户账号已存在',
            //                     type: 'error'
            //                 });
            //             }else{
            //                 this.disabled = false
            //             }
            //     })
            // }else{
            //     this.disabled = true
            //     return
            // }
        },
    },

}
</script>

<style>
/*提升样式*/
.ivu-select-dropdown, .ivu-cascader-transfer{
    z-index: 3000 !important;
}
.ivu-cascader .ivu-input {
    font-size: 13px;
    padding-left: 15px;
}
</style>

<style scoped lang="scss">
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    display: inline-block;
}
</style>
